<template>
  <div class="edit-down-table">
    <vxe-pulldown class="edit-down-pulldown" ref="xDown" transfer>
      <template>
        <vxe-input class="edit-down-input" v-model="currentVal" clearable suffix-icon="fa fa-caret-down" @clear="clearHandle" @keyup="keyupEvent"  @click="clickEvent" @suffix-click="suffixClick"></vxe-input>
      </template>
      <template v-slot:dropdown>
        <div class="edit-down-wrapper">
          <div class="edit-down-item" v-for="item in list" :key="item.value" @click="selectEvent(item)">
            <i class="fa fa-user-o"></i>
            <span>{{ item.label }}</span>
          </div>
        </div>
      </template>
    </vxe-pulldown>
  </div>
</template>

<script>
import * as R from 'ramda'

export default {
  name: 'VueTableSearchSelect',
  props: {
    selectedChanged: {
      type: Function,
      required: true
    },
    options: {
      type: Array,
      required: true
    },
    params: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      currentVal: '',
      list: []
    }
  },
  methods: {
    clickEvent() {
      this.$refs.xDown.showPanel()
    },
    clearHandle() {
      this.currentVal = ''
      this.selectedChanged({})
      this.keyupEvent()
    },
    keyupEvent() {
      this.list = this.currentVal ? this.options.filter(item => item.label.indexOf(this.currentVal.toUpperCase()) > -1) : this.options
      // if (this.list && this.list.length == 1) {
      //  this.selectEvent(this.list[0])
      // }
    },
    suffixClick() {
      this.$refs.xDown.togglePanel()
    },
    selectEvent(item) {
      this.currentVal = item.label
      this.selectedChanged(item)
      this.$refs.xDown.hidePanel()
    }
  },
  created() {
    const {row, column} = this.params
    const value = row[column.property]

    this.currentVal = R.propOr(value, 'label', R.find(R.propEq('value', value), this.options))
    this.list = this.options
  },
  mounted() {
    this.keyupEvent()
  }
}
</script>

<style lang="scss">
.edit-down-pulldown {
  width: 100%;
}

.vxe-pulldown--panel {
  z-index: 3000 !important;
}

.edit-down-wrapper {
  width: 600px;
  height: 300px;
  overflow: auto;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
}
</style>
